<template>
	<div class="error_page">
		<div class="img">
			<img src="~@/assets/img/404.svg" alt="" />
		</div>
		<div class="txt">
			<h2>404</h2>
			<h3>UH OH! 页面丢失</h3>
			<p>您所寻找的页面不存在。你可以点击下面的按钮返回主页</p>
			<a class="btn" href="/">返回首页</a>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	mounted() {},
	methods: {
		handlerReturnHome() {
			this.$router.replace({
				path: '/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.error_page {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	height: 100%;
	.img {
		width: 400px;
		padding: 16px;
		box-sizing: border-box;
	}
	.txt {
		width: 400px;
		h2 {
			font-size: 120px;
			line-height: 1;
			margin-bottom: 16px;
		}
		h3 {
			font-size: 32px;
			line-height: 1;
			margin-bottom: 20px;
		}
		p {
			font-size: 16px;
			line-height: 1.75;
		}
		a.btn {
			display: block;
			color: #333;
			width: 120px;
			height: 36px;
			font-size: 16px;
			margin-top: 20px;
			line-height: 36px;
			font-weight: bold;
			text-align: center;
			border-radius: 18px;
			text-decoration: none;
			border: solid 2px #000;
			background-color: #fff;
			user-select: none;
		}
	}
}
</style>
